<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <!-- 
        v-for 列表渲染(循环节点操作)
        语法格式: v-for="(元素,索引) in 需要循环的变量"
        key:"xxxx"
     -->
     <!-- 循环一维数组 -->
     <ul>
        <li v-for="(item,index) in arr">
            {{ index }} == {{ item }}
        </li>
     </ul>
     <ul>
        <li v-for="val in arr">
            {{ val }}
        </li>
     </ul>

     <!-- 循环对象数组 -->
     <ul>
        <li v-for="(item,index) in brr">
            {{ index }}--{{ item.name }}--{{ item.age }}
        </li>
     </ul>

     <!-- 循环对象 item 元素 key 键 ind是索引 -->
     <ul>
        <li v-for="(item,key,ind) in obj">
            {{ ind }}--{{ key }}--{{ item }}
        </li>
     </ul>
     <script>
        new Vue({
            el:"#app",
            data:{
                arr:["刘备","关羽","张飞"],
                brr:[
                    {id:1,name:"狗蛋",age:20},
                    {id:1,name:"翠花",age:21},
                    {id:1,name:"旺财",age:20},
                ],
                obj:{
                    id:1,name:"来福",age:20
                }
            }
        })
     </script>
</body>
</html>